<template>
	<div>
		<a-input allowClear :placeholder="`起始${text}`" v-model="startValue"  autocomplete="off" />
		<label style="line-height: 32px;margin: 0 5px;">~</label>
		<a-input allowClear :placeholder="`终止${text}`" v-model="endValue" autocomplete="off" />
	</div>
</template>

<script>
export default {
	name: 'JRangeInput',
	props: {
		value: {
			type: Array,
			required: false
		},
		text: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			startValue: '',
			endValue: '',
			myValue: this.value
		};
	},
	watch: {
		value: {
			handler(newValue, oldValue) {
				if (!newValue || newValue.length == 0) {
					this.startValue = '';
					this.endValue = '';
				}
			},
			deep: true,
			// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
			immediate: true
		},
		myValue(newValue) {
			this.$emit('change', newValue);
		},
		startValue(newValue) {
			this.startValue=newValue.trim()
			this.myValue = [this.startValue, this.endValue];
		},
		endValue(newValue) {
			this.endValue=newValue.trim();
			this.myValue = [this.startValue, this.endValue];
		}
	}
};
</script>

<style></style>
